<template>
  <div>
    <!-- 导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>房屋管理</el-breadcrumb-item>
      <el-breadcrumb-item>房屋列表</el-breadcrumb-item>
      <el-breadcrumb-item></el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 面板 -->
    <el-card>
      <el-row :gutter="20">
         <el-col :span="5">
          <el-input placeholder="请输入地址" v-model="haddress"><el-button @click="search" slot="append" icon='el-icon-search'></el-button></el-input>
         </el-col>
         <el-col :span="15">
          <el-button @click="addboxs" type="primary">添加房屋</el-button>
         </el-col>
      </el-row>
      <!-- //表格 -->
          <el-table :data="houserList.records" border stripe>
            <el-table-column prop='id' label="序号"></el-table-column>
            <el-table-column prop='haddress' label="地址"></el-table-column>
            <el-table-column prop='roomNum' label="户型"></el-table-column>
            <el-table-column prop='rentingType' label="出租形式"></el-table-column>
            <el-table-column prop='payType' label="付款方式"></el-table-column>
            <el-table-column prop='hproportion' label="房屋面积"></el-table-column>
            <el-table-column prop='htime' label="发布时间"></el-table-column>
            <el-table-column prop='hprice' label="入住价格"></el-table-column>
            <el-table-column prop='cid' label="客户id"></el-table-column>
            <el-table-column prop='hlogo' label="房屋头像">
              <template slot-scope="scope">
                  <el-image style="width: 50px; height: 50px" :src="scope.row.hlogo"></el-image>
              </template>
            </el-table-column>
            <el-table-column prop='hdesc' label="房屋描述">
                <template slot-scope="scope">
                  <div style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">{{ scope.row.hdesc }}</div>
                </template>
            </el-table-column>
            <el-table-column prop='aid' label="区域id"></el-table-column>
            <el-table-column prop='hrecommend' width='150px' label="推荐度">
                <template slot-scope="scope">
                    <el-rate v-model='scope.row.hrecommend' disabled ></el-rate>
                </template>
            </el-table-column>
            <el-table-column prop='furnitures' label="家具id"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                
               <el-button @click="showEdit(scope.row)" size="mini" type="primary" icon="el-icon-edit"></el-button><br>
                 <el-button @click="showDel(scope.row.id)" size="mini" type="danger" icon='el-icon-delete' ></el-button>
                </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
           <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" 
           :current-page="page.pageNum" :page-sizes="[5, 10, 20]" :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="total">
           </el-pagination>
    </el-card>
    <!-- 新增框  -->
     <el-dialog title="新增房屋" :visible.sync="addbox">
      <el-form>
        <el-form-item label="地址" >
            <el-select v-model="addForm.aid" placeholder="请选择地址">
              <el-option v-for="item in AreaList" :key="item.id" :label="item.areaName" :value="item.id">
              </el-option>
           </el-select>
        </el-form-item>
        <el-form-item label="详细地址" >
           <el-input v-model="addForm.haddress"></el-input>
        </el-form-item>
        <el-form-item label="户型" >
           <el-input v-model="addForm.roomNum"></el-input>
        </el-form-item>
        <el-form-item label="出租形式" >
           <el-select v-model="addForm.rentingType" placeholder="请选择">
             <el-option label="整租" value="整租"></el-option>
             <el-option label="合租" value="合租"></el-option>
           </el-select>
        </el-form-item>
        <el-form-item label="付款方式" >
           <el-select v-model="addForm.payType" placeholder="请选择">
             <el-option label="面议" value="面议"></el-option>
             <el-option label="押一付一" value="押一付一"></el-option>
             <el-option label="押一付二" value="押一付二"></el-option>
             <el-option label="押一付三" value="押一付三"></el-option>
           </el-select>
        </el-form-item>
        <el-form-item label="房屋面积" >
           <el-input v-model="addForm.hproportion"></el-input>
        </el-form-item>
        <el-form-item label="入住价格" >
           <el-input v-model="addForm.hprice"></el-input>
        </el-form-item>
        <el-form-item label="客户" >
           <el-select v-model="addForm.cid" placeholder="请选择">
             <el-option v-for="item in clientList" :key="item.id" :label="item.rname" :value="item.id"></el-option>
           </el-select>
        </el-form-item>
        <el-form-item label="房屋头像" >
           <el-upload action="#" ref="mYupload" list-type="picture-card" :on-remove="handleRemove" :http-request="customUpload">
            <i class="el-icon-plus"></i>
           </el-upload>
        </el-form-item>
        <el-form-item label="房屋描述" >
           <el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="addForm.hdesc"></el-input>
        </el-form-item>
        
        <el-form-item label="推荐度" >
           <el-rate v-model="addForm.hrecommend"></el-rate>
        </el-form-item>
        <el-form-item label="家具">
        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
          <div style="margin: 15px 0;"></div>
          <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
        <el-checkbox v-for="city in cities" :label="city.id" :key="city.id">{{city.furnitureName}}</el-checkbox>
        </el-checkbox-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
         <el-button @click="addbox=false">取 消</el-button>
         <el-button @click="addHouser" type="primary">确 定</el-button>
      </div>
      </el-dialog>

       <!-- 修改框  -->
     <el-dialog title="修改客户信息" :visible.sync="editbox">
      <el-form  >
        <el-form-item label="地址" >
            <el-select v-model="updForm.aid" placeholder="请选择地址">
              <el-option v-for="item in AreaList" :key="item.id" :label="item.areaName" :value="item.id">
              </el-option>
           </el-select>
        </el-form-item>
        <el-form-item label="详细地址" >
           <el-input v-model="updForm.haddress"></el-input>
        </el-form-item>
        <el-form-item label="户型" >
           <el-input v-model="updForm.roomNum"></el-input>
        </el-form-item>
        <el-form-item label="出租形式" >
           <el-select v-model="updForm.rentingType" placeholder="请选择">
             <el-option label="整租" value="整租"></el-option>
             <el-option label="合租" value="合租"></el-option>
           </el-select>
        </el-form-item>
        <el-form-item label="付款方式" >
           <el-select v-model="updForm.payType" placeholder="请选择">
             <el-option label="面议" value="面议"></el-option>
             <el-option label="押一付一" value="押一付一"></el-option>
             <el-option label="押一付二" value="押一付二"></el-option>
             <el-option label="押一付三" value="押一付三"></el-option>
           </el-select>
        </el-form-item>
        <el-form-item label="房屋面积" >
           <el-input v-model="updForm.hproportion"></el-input>
        </el-form-item>
        <el-form-item label="入住价格" >
           <el-input v-model="updForm.hprice"></el-input>
        </el-form-item>
        <el-form-item label="客户" >
           <el-select v-model="updForm.cid" placeholder="请选择">
             <el-option v-for="item in clientList" :key="item.id" :label="item.rname" :value="item.id"></el-option>
           </el-select>
        </el-form-item>
        <el-form-item label="房屋头像" >
           <el-upload action="#" ref="mYupload" list-type="picture-card" :on-remove="updhandleRemove" :http-request="updcustomUpload">
            <i class="el-icon-plus"></i>
           </el-upload>
        </el-form-item>
        <el-form-item label="原图片预览" >
          <el-image style="width: 110px; height: 110px" :src="previewImage" id="yourFileInputId"></el-image>
        </el-form-item>
        <el-form-item label="房屋描述" >
           <el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="updForm.hdesc"></el-input>
        </el-form-item>
        
        <el-form-item label="推荐度" >
           <el-rate v-model="updForm.hrecommend"></el-rate>
        </el-form-item>
        <el-form-item label="家具">
        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
          <div style="margin: 15px 0;"></div>
          <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
        <el-checkbox v-for="city in cities" :label="city.id" :key="city.id">{{city.furnitureName}}</el-checkbox>
        </el-checkbox-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
         <el-button @click="editbox=false">取 消</el-button>
         <el-button @click="update" type="primary">确 定</el-button>
      </div>
      </el-dialog>
  </div>
</template>

<script>
export default {
    data(){
        return{
            houserList:[],
            total:0,
            page:{
                pageNum:1,
                pageSize:10
            },
            editbox: false,  //显示修改框
            addbox: false ,  //显示新增框
            // 添加数据
            addForm:{
                haddress:'',
                roomNum:0,
                rentingType:'',
                payType:'',
                hproportion:'',
                htime:'',
                hprice:'',
                cid:'',
                hdesc:'',
                aid:'',
                hrecommend:0,
                furnitures:'',
            },
            // 修改数据
            updForm:{
            },
            // 图片数据
            updfile:null,
            addfile:null,
            //原图片
            previewImage:null,
            // 获取客户id
            clientList:[],
            // 获取地址
            AreaList:[],
            //家具
            checkAll: false,
            checkedCities: [], // 保存的家具id
            cities: [], // 家具数据
            isIndeterminate: true,
            haddress:""
        }
    },
    created(){
      document.title="房屋列表"
        this.getHouserList();
    },
    methods:{
      async search(){
         let ret=await this.$http.get('/admin/houserInfo/sousuo',{params:{haddress:this.haddress}});
         this.houserList=ret.data;
         if(ret.code != 200){
              return this.$message.error(ret.message )
            }
         this.$message.success(ret.message);
      },
        // 删除
       async showDel(id){
            let ok=await this.$confirm('此操作将永久删除, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).catch(err=>err);
            if(ok!='confirm'){
              return this.$message.info('你取消了删除')
            }
            let ret=await this.$http.delete(`/admin/houserInfo/delete/${id}`);
            if(ret.code != 200){
              return this.$message.error(ret.message )
            }
            this.$message.success(ret.message);
            this.getHouserList()
        },
        //更新
        async update(){
         this.updForm.furnitures=this.checkedCities.join('_');
            let formData=new FormData;
            formData.append('file',this.updfile);
            formData.append('hoinfo',JSON.stringify(this.updForm));
            let ret=await this.$http.put('/admin/houserInfo/update',formData);
            if(ret.code != 200){
               return this.$message.error(ret.message);
            }
            this.$message.success(ret.message);
            this.$refs['mYupload'].clearFiles();
            this.updfile=null;
            this.editbox=false;
            this.getHouserList();
            console.log(this.checkedCities);
        },
        async showEdit(row){
            this.editbox=true;
            this.updForm=row;
            this.previewImage=row.hlogo
            this.checkedCities=row.furnitures.split('_').map(Number);
            console.log(this.checkedCities);
            //获取地址
            let ret=await this.$http.get('/admin/areaInfo/selectAll');
            this.AreaList=ret.data;
            //获取客户
            let ret2=await this.$http.get('/admin/clientinfo/select');
            this.clientList=ret2.data;
            let fu=await this.$http.get('/admin/fuinfo/selectAll');
            this.cities=fu.data;
        },
        updcustomUpload(file){this.updfile=file.file},
        updhandleRemove(){this.updfile=null},
        // 增加
        async addHouser(){
         this.addForm.furnitures=this.checkedCities.join('_');
            let formData=new FormData;
            formData.append('file',this.addfile);
            formData.append('hoinfo',JSON.stringify(this.addForm));
            let ret=await this.$http.post('/admin/houserInfo/add',formData);
            if(ret.code != 200){
               return this.$message.error(ret.message);
            }
            this.$message.success(ret.message);
            this.$refs['mYupload'].clearFiles();
            this.addbox=false;
            this.getHouserList();
        },
        async addboxs(){
            this.addbox=true;
            //获取地址
            let ret=await this.$http.get('/admin/areaInfo/selectAll');
            this.AreaList=ret.data;
            let ret2=await this.$http.get('/admin/clientinfo/select');
            this.clientList=ret2.data;
            let fu=await this.$http.get('/admin/fuinfo/selectAll');
            this.cities=fu.data;
        },
        //获取图片
        customUpload(file){this.addfile=file.file},
        handleRemove(file,fileList){addfile=null},
        
    handleCheckAllChange(val) {
      // 当全选时，我们需要将所有城市的id添加到checkedCities数组中
      this.checkedCities = val ? this.cities.map(city => city.id) : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      // 更新checkedCities数组，确保它包含的是被选中城市的id
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
    },
        //查询
        async getHouserList(){
            let ret=await this.$http.get('/admin/houserInfo/selectAll',{params: this.page});
            this.houserList=ret.data;
            this.total=ret.data.total;
        },
        handleSizeChange(size){
        //  console.log('变化每页条数',size);
         this.page.pageSize = size 
         this.getHouserList();  //刷新
      },
      handleCurrentChange(p){
        //  console.log('变化页码',p);
         this.page.pageNum = p 
         this.getHouserList();  //刷新
      },
    }
}
</script>

<style lang="less" scoped>
</style>